<!--
 * @Version: 1.0
 * @Date: 2021-04-08 14:55:24
 * @LastEditTime: 2021-11-26 17:17:16
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div v-loading="loading">
      <div>
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            {{ title }}订单信息
          </h2>
        </div>
        <el-form :model="formData" inline label-width="150px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单编号：">
                <span>{{ formData.order_no }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="平台订单编号：">
                <span>{{ formData.platform_no }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="平台订单编号2：">
                <span>{{ formData.platform_no_ext }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '客户订单'" :span="8">
              <el-form-item label="平台：">
                <span>{{ formData.platform }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '客户订单'" :span="8">
              <el-form-item label="店铺：">
                <span>{{ formData.shop_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态：">
                <span>{{ formData.status_text }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注：">
                <span>{{ formData.platform_remark?formData.platform_remark: '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-if="formData.company" label="所属客户：">
                <span>{{ formData.company.company_name }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '借卖订单'" :span="8">
              <el-form-item label="总金额：">
                <app-price :price="formData.total_price" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总个数：">
                <span>{{ formData.total_num }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '借卖订单'" :span="8">
              <el-form-item label="生成时间：">
                <span>{{ formData.created_at? formData.created_at : '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '客户订单'" :span="8">
              <el-form-item label="付款时间：">
                <span>{{ formData.paid_at_text ? formData.paid_at_text: '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title !== '客户订单' && title !== '借卖订单'" :span="8">
              <el-form-item label="订单拉取时间：">
                <span>{{ formData.get_at_text }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title === '借卖订单'" :span="8">
              <el-form-item label="订单发货类型：">
                <span>{{ formData.delivery_method===1 ? '客户发货': '平台自发' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.delivery_method === 1" :span="8">
              <el-form-item label="物流公司：">
                <span>{{ formData.delivery_method===1 ? '客户发货': '平台自发' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.delivery_method === 1" :span="8">
              <el-form-item label="物流单号：">
                <span>{{ formData.delivery_method===1 ? '客户发货': '平台自发' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="title === '借卖订单'" :span="8">
              <el-form-item label="结算单价：">
                <span>{{ formData.settlement_price }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发货时间：">
                <span>{{ formData.shipped_at ? formData.shipped_at: '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人：">
                <span>{{ formData.created_name?formData.created_name:'-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间：">
                <span>{{ formData.created_at }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="修改人：">
                <span>{{ formData.updater_name?formData.updater_name: '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="修改时间：">
                <span>{{ formData.updated_at }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.order_type === 4" :span="8">
              <el-form-item label="预售时间：">
                <span>{{ formData.estimate_time }}</span>
              </el-form-item>
            </el-col>
            <!-- estimate_time -->
          </el-row>
        </el-form>
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            收货人信息
          </h2>
        </div>
        <el-form :model="address" inline label-width="150px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="买家姓名：">
                <span>{{ address.address_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="买家邮箱：">
                <span>{{ address.address_email }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="eBay User Name：">
                <span>{{ address.address_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话号码：">
                <span>{{ address.address_phone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮编：">
                <span>{{ address.address_postalcode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="国家：">
                <span>{{ address.address_country }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="州/省：">
                <span>{{ address.address_stateorprovince }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市：">
                <span>{{ address.address_cityname }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="街道1：">
                <span>{{ address.address_street1 }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="街道2：">
                <span>{{ address.address_street2 }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="街道3：">
                <span>{{ address.address_street3 }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            商品信息
          </h2>
        </div>
        <div>
          <el-table :data="product" border>
            <!-- <el-table-column align="center" label="缩略图" prop="url" /> -->
            <el-table-column align="center" label="缩略图">
              <template slot-scope="scope">
                <el-image style="width: 50px; height: 50px" fit="contain" :src="scope.row.goods_pic">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" label="系统sku" prop="goods_code" />
            <el-table-column align="center" label="商品名称" prop="goods_name" show-overflow-tooltip />
            <!-- packing_method -->
            <el-table-column align="center" label="包装方式" prop="packing_method">
              <template slot-scope="scope">
                {{ scope.row.packing_method ===1 ? '普通商品' : '多箱包装' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品发货类型">
              <template slot-scope="scope">
                {{ scope.row.order_type_source === 2 ? '补货' : '正常' }}
              </template>
            </el-table-column>
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="平台sku" prop="sku" show-overflow-tooltip />
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="店铺" show-overflow-tooltip>
              <template>
                {{ formData.shop_name }}
              </template>
            </el-table-column>
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="属性" prop="variation" show-overflow-tooltip />
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="单价" prop="transaction_price_value">
              <template slot-scope="scope">
                <app-price :price="scope.row.transaction_price_value" />
              </template>
            </el-table-column>
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="币别" prop="transaction_price_currencyid" />
            <el-table-column align="center" label="数量" prop="quantity_purchased" />
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="金额(不含税)" prop="transaction_price_value_all">
              <template slot-scope="scope">
                <app-price :price="scope.row.transaction_price_value_all" />
              </template>
            </el-table-column>
            <el-table-column v-if="title !== '客户订单' && title !== '借卖订单'" align="center" label="税费" prop="tax_amount_value">
              <template slot-scope="scope">
                <app-price :price="scope.row.tax_amount_value" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="created_at" width="150" />
          </el-table>
        </div>
        <div class="header_title_box mt25">
          <h2 style="margin-right:50px">
            发货信息
          </h2>
        </div>
        <div>
          <el-table :data="deliveryList" border>
            <el-table-column align="center" label="发货单号" prop="invoice_no" />
            <el-table-column align="center" label="状态" prop="delivery_state">
              <template slot-scope="scope">
                {{ orderStatus[scope.row.delivery_state] }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="面单打印" prop="delivery_process_status">
              <template slot-scope="scope">
                {{ scope.row.delivery_process_status === 1 ? '未打印' : '已打印' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="拆单类型" prop="delivery_state">
              <template slot-scope="scope">
                {{ scope.row.order_delivery_type === 1 ? '整单发货' : '拆分发货' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="发货单来源" prop="order_type_source">
              <template slot-scope="scope">
                {{ scope.row.order_type_source === 1 ? '正常订单' : '补货订单' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="发货单类型" prop="logistics_status">
              <template slot-scope="scope">
                {{ scope.row.logistics_status === 1 ? '成功发货单' : '异常发货单' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="系统sku" prop="goods_code" />
            <el-table-column align="center" label="分组sku" prop="goods_group_name" />
            <el-table-column align="center" label="数量" prop="number" />
            <el-table-column align="center" label="平台" prop="number">
              <template>
                {{ formData.platform }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="快递" prop="shipping_name" />
            <el-table-column align="center" label="快递单号" prop="shipping_code" width="170" />
            <el-table-column align="center" label="运费" prop="freight_weight_price_all">
              <template slot-scope="scope">
                <div v-if="scope.row.platform_id!==3 && scope.row.platform_id!==4">
                  <app-price :price="scope.row.freight_weight_price_all" />
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="币别">
              <template>
                <span>USD</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-popover placement="right" width="400" trigger="click" @show="showLogistics(scope.row)">
                  <div style="min-height: 200px;max-height:400px;overflow: auto;">
                    <div v-if="scope.row.shipping_name==='UPS'">
                      <DeliveryUps :code="scope.row.shipping_code" :data-obj="scope.row" type="1" />
                    </div>
                    <div v-else>
                      <DeliveryUsps :code="scope.row.shipping_code" :data-obj="scope.row" type="1" />
                    </div>
                  </div>
                  <el-button slot="reference" type="text" size="mini">查看物流</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="footer-center">
        <el-button type="primary" @click="handleCancelPath">返 回</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { accAdd, accMul } from '@/utils/index'
import DeliveryUps from '@/components/DeliveryUps/index.vue'
import DeliveryUsps from '@/components/DeliveryUsps/index.vue'
// import Tempalant from '@/views/tempalant.vue'
export default {
  name: 'OrderResordInfo',
  components: { DeliveryUps, DeliveryUsps },
  data() {
    return {
      logisticsLoading: false,
      title: '',
      loading: false,
      formData: {},
      address: {},
      product: [],
      deliveryList: [],
      // 物流信息
      activities: [
        {
          content: '活动按期开始',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        }
      ],
      path: {
        '销售订单': '/order/orderRecords',
        '异常订单': '/order/orderAbnormal',
        '借卖订单': '/order/orderBorrowSell',
        '客户订单': '/order/orderCustomer',
        '预售订单': '/order/orderPresale',
        'FBA订单': '/order/orderFba'
      },
      orderStatus: {
        1: '待发货',
        2: '待打印面单',
        3: '运输中',
        4: '配送中',
        5: '已收货',
        6: '作废'
      }
    }
  },
  created() {
    this.loading = true
    this.title = this.$route.query.title
    this.orderInfo()
  },
  methods: {
    fucaccMul(val1, val2) {
      return accMul(val1, val2)
    },
    orderInfo() {
      const vm = this
      vm.$http.get(`orderRecords/${this.$route.params.id}`).then((res) => {
        if (res.code === 10000) {
          vm.formData = res.data
          vm.address = res.data.address[0]
          vm.product = res.data.product.map((arr) => {
            arr.transaction_price_value_all = accMul(arr.transaction_price_value, arr.quantity_purchased)
            // arr.variation = arr.variation ? arr.variation : '-'
            arr.goods_code = arr.goods_code ? arr.goods_code : arr.product_code
            return arr
          })
          if (vm.formData.order_no) {
            this.deliveryOredrList(vm.formData.id)
          }
          vm.loading = false
        }
        vm.loading = false
      })
    },
    // 获取包裹列表
    deliveryOredrList(id) {
      const vm = this
      vm.$http.get(`/orders/orderDeliverList/${id}`).then((res) => {
        this.deliveryList = res.data.map((arr) => {
          // （基础运费 * 数量） + （额外运费 * 数量）+ 偏远运费
          arr.freight_weight_price_all = accAdd(accMul(accAdd(arr.freight_weight_price, arr.freight_additional_price), arr.number), arr.postcode_fee)
          return arr
        })
      })
    },
    showLogistics(data) {
      console.log('=============查看物流')
      this.logisticsLoading = true
      //  console.log('scope.row.shipping_code', data)
    },
    handleCancelPath() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
